<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频巡检</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style>
        .layui-form-item .layui-inline{
            margin-right: 0px!important;
        }
        .zdyInput{
            width: 150px!important;
        }
    </style>
</head>
<body class="pear-container">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">设备名称</label>
                            <div class="layui-input-inline zdyInput">
                                <input type="text" name="b.camera_name\@like" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">设备编号</label>
                            <div class="layui-input-inline zdyInput">
                                <input type="text" name="t.cameraNum\@like" placeholder="" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">设备类型</label>
                            <div class="layui-input-inline zdyInput">
                                <select name="b.camera_type" lay-search="">
                                    <option value="">全部</option>
                                    <option value="1">移动布控球</option>
                                    <option value="2">固定摄像头</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-inline" style="width: 300px!important;">
                                <input type="text" name="dateinfo" style="width: 300px" class="layui-input" id="xcTime" placeholder="请选择时间区间" autocomplete="off">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="camera-query">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="camera-table" lay-filter="camera-table"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="video-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="lunxun" id="btnSendCode">
            <i class="layui-icon layui-icon-triangle-r"></i>
            开始轮巡
        </button>
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="updTask">
            <i class="layui-icon layui-icon-util"></i>
            配置
        </button>
        <button class="pear-btn pear-btn-info pear-btn-md" lay-event="block">
            <i class="layui-icon layui-icon-set-fill"></i>
            白名单
        </button>
        <button class="pear-btn pear-btn-info pear-btn-md" lay-event="plan">
            <i class="layui-icon layui-icon-set-fill"></i>
            免检计划
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="camera-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="show" title="查看"><i class="layui-icon layui-icon-picture"></i></button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
    </script>

    <script type="text/html" id="camera-type">
        {{# if(d.camera_type == 1){ }}
        <span>移动布控球</span>
        {{# }else if(d.camera_type == 2){ }}
        <span>固定摄像头</span>
        {{# }else{ }}
        <span>未知</span>
        {{# } }}
    </script>

</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'toast','laydate'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        var toast = layui.toast;
        let laydate = layui.laydate;
        let MODULE_PATH = "${ctxPath}/video/";

        laydate.render({
            elem: '#xcTime'
            ,type: 'datetime'
            ,range: true //或 range: '~' 来自定义分割字符
        })

        //$("#xcTime").val("2022-04-29 02:15:15 - 2022-04-30 15:15:15");
        let cols = [[
            {type: 'checkbox'},
            {title: '设备名称', field: 'camera_name', align: 'center'},
            {title: '设备类型', field: 'camera_type', align: 'center', templet: '#camera-type'},
            {title: '设备编号', field: 'cameraNum', align: 'center'},
            {title: '事件类型', field: 'algorithmId', align: 'center'},
            {title: '巡查时间', field: 'xcTime', align: 'center'},
            {title: '操作', toolbar: '#camera-bar', align: 'center', width: 120}
        ]];

        table.render({
            elem: '#camera-table',
            url: MODULE_PATH + 'data/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#video-toolbar',
            defaultToolbar: "",
            height: 'full-180'
        });

        table.on('toolbar(camera-table)', function(obj){
            if(obj.event === 'lunxun'){
                window.lunxun();
            }else if (obj.event==='batchRemove'){
                window.batchRemove(obj);
            }else if (obj.event==='updTask'){
                window.updTask();
            }else if (obj.event==='block'){
                window.block();
            }else if (obj.event==='plan'){
                window.plan();
            }
        });

        form.on('submit(camera-query)', function (data) {
            if(data.field.dateinfo){
                data.field["t.xcTime_date_ge"] = data.field.dateinfo.substring(0, 19);
                data.field["t.xcTime_date_le"] = data.field.dateinfo.substring(22, 41);
                data.field.dateinfo=undefined;
            }
            table.reload('camera-table', {
                where: data.field,page: {curr: 1}
            });
            return false;
        });

        table.on('tool(camera-table)', function(obj){
            if(obj.event === 'show'){
                window.show(obj.data.imagePath);
            }else if (obj.event === 'remove'){
                window.remove(obj);
            }
        });

        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数

        window.lunxun=function (){
            layer.confirm('确定要立即轮巡一次？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                $.ajax({
                    url: MODULE_PATH+"data/getTask",
                    dataType:'json',
                    type:'post',
                    success:function(result){
                        if(result.code == 0) {
                            $.ajax({
                                url: MODULE_PATH+"data/lunxun",
                                dataType:'json',
                                type:'post',
                                success:function(result){
                                    if(result.code == 0) {
                                        // toast.info({title: "系统消息", message: "视频轮巡已完成！",position: 'topRight',timeout: 5000});
                                        toast.info({title: "系统消息", message: "视频轮巡已开始！",position: 'topRight',timeout: 5000});
                                        curCount = count;
                                        document.getElementById("btn_lunxun").setAttribute("disabled","true" );//设置按钮为禁用状态
                                        document.getElementById("btn_lunxun").className="pear-btn pear-btn-disabled pear-btn-md";
                                        $('#btnSendCode').text(curCount + "秒后");
                                        InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                                    }
                                },
                                error:function (){
                                    toast.error({title: "系统消息", message: "视频轮巡调用失败！",position: 'topRight'});
                                }
                            });
                        }else if (result.code==402){
                            layer.msg(result.message,{icon:2,time:2000});
                        }
                    },
                    error:function (){
                        toast.error({title: "系统消息", message: "视频轮巡调用失败！",position: 'topRight'});
                    }
                })
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该记录', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH+"data/remove?ids=" + obj.data['id'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            var checkIds = common.checkField(obj, 'id');
            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            layer.confirm('确定要删除这些记录', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH+"data/remove?ids=" + checkIds,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('camera-table');
                            });
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.updTask=function (){
            layer.open({
                type: 2,
                title: '轮巡配置',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '400px', common.isModile() ? '100%' : '300px'],
                content: MODULE_PATH + 'view/edit'
            });
        }

        window.block=function (){
            layer.open({
                type: 2,
                title: '轮巡白名单',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '1100px', common.isModile() ? '100%' : '830px'],
                content: '${ctxPath}/allow/view/list'
            });
        }

        window.plan=function (){
            layer.open({
                type: 2,
                title: '轮巡免检计划',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '1100px', common.isModile() ? '100%' : '830px'],
                content: '${ctxPath}/camera/plan/view/list'
            });
        }


        window.show=function (imagePath) {
            var imgHtml = "<img src='"+imagePath+"' onerror=\"javascript:this.src='${ctxPath}/static/resource/images/pic404.png'\" width='100%' height='100%' style='object-fit:contain;' />";
            layer.open({
                type: 1,
                shadeClose: true,
                scrollbar: false,
                maxmin: true,
                area: ['800px', '500px'],
                offset: 'auto',
                shade: 0.1,
                title: "视频巡检预览",
                content: imgHtml
            })
        }

        window.refresh = function (param) {
            table.reload('camera-table');
        }

        //timer处理函数
        function SetRemainTime(){
            if(curCount == 0){
                $('#btn_lunxun').removeClass('layui-btn-disabled');
                $('#btn_lunxun').text("开始轮巡");
                window.clearInterval(InterValObj);// 停止计时器
                document.getElementById("btn_lunxun").removeAttribute("disabled");//移除禁用状态改为可用
                document.getElementById("btn_lunxun").className="pear-btn pear-btn-primary pear-btn-md";
            } else{
                curCount--;
                $('#btn_lunxun').text(curCount + " 秒后再次轮巡");
            }
        }
    });
</script>
</html>